<template>
	<view class="address">
		<view class="address-main">
			<view class="mainss"  v-if="isShow">
				<view class="address-item" v-for="item in addressList" :key="item.id" >
					<view class="lefts">
						<view class="tag">{{item.tag}}</view>
						<view class="lefts-main">
							<view class="top">
								<view class="name">{{item.name}}</view>
								<view class="tel">{{item.tel}}</view>
								<view class="isUse" v-if="item.isUse == '1'">默认</view>
							</view>
							<view class="bottom">
								{{item.cityStr}}
							</view>
						</view>
					</view>
					<view class="rights" @tap="editClick(item)">
						<view class="imgs">
							<image src="/static/icons/edit.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="mainss">
				<view  @tap="itemsClick(item)" class="address-item" v-for="item in addressList" :key="item.id">
					<view class="lefts">
						<view class="tag">{{item.tag}}</view>
						<view class="lefts-main">
							<view class="top">
								<view class="name">{{item.name}}</view>
								<view class="tel">{{item.tel}}</view>
								<view class="isUse" v-if="item.isUse == '1'">默认</view>
							</view>
							<view class="bottom">
								{{item.cityStr}}
							</view>
						</view>
					</view>
					<view class="rights" @tap.stop="editClick(item)">
						<view class="imgs">
							<image src="/static/icons/edit.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 判断一下 -->
			
			
		</view>
		<view class="btns">
			<view class="main-text" @tap="addClick">
				新增地址
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getAddressList,
		getSaveAddress
	} from "@/network/address/index.js"
	export default {
		data() {
			return {
				addressList: [],
				isShow: true
			};
		},
		onLoad(options) {
			console.log(options)
			if (options.type == 'select') {
				this.isShow = false
			}
			this.getAddressLists()
		},
		methods: {
			async getAddressLists() {
				const res = await getAddressList({
					userId: uni.getStorageSync('tokens').id
				});
				this.addressList = res.data.data
				console.log(this.addressList)
			},
			addClick() {
				uni.navigateTo({
					url: '/pages/address/addAddress/addAddress'
				})
			},
			//  选择地址
			itemsClick(item) {
				console.log(item, '123')
				uni.navigateTo({
					url: '/pages/product/productOrder/productOrder?id=' + item.id
				})
				// uni.navigateBack()
			},
			editClick(item) {
				let index = this.addressList.findIndex(items => items.id == item.id);
				console.log(index, item)
				uni.setStorageSync('lejuAddress', item)
				uni.navigateTo({
					url: '/pages/address/editAddress/editAddress?type=' + 'edit'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		background-color: #F1ECE7;
		height: 100vh;
		overflow: auto;
	}
	.address-main {
		padding: 20rpx;
		overflow: hidden;
		.address-item {
			display: flex;
			justify-content: space-between;
			margin: 0rpx 0 40rpx;
			.lefts {
				display: flex;
				align-items: center;
				
				.tag {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
					color: #fff;
					background-image: linear-gradient(45deg,#C7C7C7, #B0B0B0);
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					padding: 4rpx;
					margin-right: 40rpx;
				}
				
				.lefts-main {
					color: #777777;
					font-size: 24rpx;
					.top {
						display: flex;
						.name {
							display: flex;
							align-items: center;
							font-size: 32rpx;
							margin-right: 40rpx;
							color: #333;
						}
						.tel {
							display: flex;
							align-items: center;
							margin-right: 40rpx;
						}
						.isUse {
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 0rpx 18rpx;
							background-color: #354E44;
							color: #fff;
							border-radius: 10px;
							font-size: 24rpx;
							line-height: 0;
						}
					}
				}
								
			}
			
			.rights {
				.imgs { //40 30
					width: 80rpx;
					height: 60rpx;
					border-left: 2rpx solid #AAAAAA;
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
	.btns {
		position: fixed;
		left: 0;
		bottom: 10rpx;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.main-text {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 70%;
			height: 80rpx;
			background-color: #354E44;
			color: #fff;
			font-size: 30rpx;
			border-radius: 40rpx;
			box-shadow: 0px 4rpx 16rpx 0px rgba(0,0,0,.4);
		}
	}
</style>
